<template>
  <div>
    <!-- 搜索栏 -->
    <search-bar :options="searchBarOptions" style="padding-top:0;" />

    <!--分割线-->
    <!-- <div class="line"></div> -->
    <div class="box-total">
      <div class="card">
        <div class="title_medium">{{ $t('m.merchantBrokerageToday') }}</div>
        <div class="titl_large">
          {{ total.branchTodayAmount | amountFormat }}
        </div>
      </div>
      <div class="card">
        <div class="title_medium">{{ $t('m.merchantBrokerageTotal') }}</div>
        <div class="titl_large">
          {{ total.branchTotalAmount | amountFormat }}
        </div>
      </div>
      <div class="card" v-if="agentLevel != 2">
        <div class="title_medium">{{ $t('m.agentBrokerageToday') }}</div>
        <div class="titl_large">
          {{ total.agentTodayAmount | amountFormat }}
        </div>
      </div>
      <div class="card" v-if="agentLevel != 2">
        <div class="title_medium">{{ $t('m.agentBrokerageTotal') }}</div>
        <div class="titl_large">
          {{ total.agentTotalAmount | amountFormat }}
        </div>
      </div>
    </div>

    <!-- 表格栏 -->
    <div class="table-box">
      <!--tab栏-->
      <div class="el_table_div" style="padding:10px 0 0;">
        <el-tabs v-model="activeName" @tab-click="switchTab">
          <el-tab-pane
            v-for="(item, index) in optionsTab"
            :key="index"
            :name="item.value"
            v-if="!item.disabled"
            :label="item.label"
          >
          </el-tab-pane>
        </el-tabs>
      </div>
      <!--表格-->
      <fast-table :options="fastTableOptions" :data="page.records" />
      <!-- 分页 -->
      <pagination
        :total="page.total"
        :current="page.current"
        :size="page.size"
        @changePageSize="changePageSize"
        @changePageNum="changePageNum"
      />
    </div>
  </div>
</template>
<script>
import page from '@/mixins/page'
import FastTable from '@/components/fast-table.vue'
import SearchBar from '@/components/search-bar.vue'
import Pagination from '@/components/pagination.vue'

export default {
  components: { Pagination, SearchBar, FastTable },
  mixins: [page],
  data () {
    return {
      optionsTab: [
        { value: '', disabled: false, label: this.$t('m.all') },
        { value: '4', disabled: false, label: this.$t('m.Merchant_') },
        {
          value: '2',
          disabled: this.getAgentLevel() == 2,
          label: this.$t('m.Franchisee2')
        }
      ],

      params: {
        target: ''
      },

      activeName: '',

      total: {
        agentTodayAmount: 0,
        agentTotalAmount: 0,
        branchTodayAmount: 0,
        branchTotalAmount: 0,
        platformTodayAmount: 0,
        platformTotalAmount: 0
      },

      fastTableOptions: {
        columns: [
          {
            label: this.$t('m.Partner_name'),
            prop: 'name',
            formatter: row => this.$format.strFormat(row.name)
          },
          {
            label: this.$t('m.Shop_Details_Contact'),
            prop: 'phone',
            formatter: row => this.$format.strFormat(row.phone)
            // formatter: row => this.$format.phoneFormat(row.phone, row.code)
          },
          {
            label: this.$t('m.brokerageToday'),
            prop: 'todayAmount',
            formatter: row => this.$format.amountFormat(row.todayAmount)
          },
          {
            label: this.$t('m.brokerageTotal'),
            prop: 'totalAmount',
            formatter: row => this.$format.amountFormat(row.totalAmount)
          },
          {
            label: this.$t('m.Finance_Balance'),
            prop: 'waitEnterAmount',
            formatter: row => this.$format.amountFormat(row.waitEnterAmount)
          },
          {
            label: this.$t('m.Agency_Details_Payouts'),
            prop: 'enterAmount',
            formatter: row => this.$format.amountFormat(row.enterAmount)
          },
          {
            operate: true,
            showcolumn: true,
            actions: [
              {
                label: this.$t('m.Details'),
                permission: row => true,
                click: row => this.toDetail(row)
              }
            ]
          }
        ]
      },
      agentLevel: this.getAgentLevel() //代理商等级
    }
  },
  watch: {
    'params.target' (newval, oldval) {
      // 代码实现
      // console.log(newval);
      if (newval == '' || newval == 0) {
        this.activeName = '0'
      }
    }
  },
  created () {
    if (this.$route.params.activeValue) {
      this.activeName = this.$route.params.activeValue.toString()
    }
    this.getSearchBar()
    this.getPage()
  },
  methods: {
    getSearchBar () {
      this.searchBarOptions = {
        search: this.search,
        bars: [
          {
            value: '',
            type: 'input',
            prop: 'search',
            placeholder: [
              this.$t('m.Partner_name'),
              this.$t('m.Shop_Details_Contact')
            ].join(' / ')
          }
        ]
      }
    },
    getTotal () {
      this.$api.brokerage.getTotalPartnerBrokerage().then(res => {
        if (this.$ok(res)) {
          this.total = res.data
        }
      })
    },
    getPage () {
      this.getTotal()
      this.$api.brokerage.getPagePartnerBrokerage(this.params, this.page).then(res => {
        if (this.$ok(res)) {
          this.page = res.data
        }
      })
    },
    // 切换tab
    switchTab (tab) {
      // console.log('switchTab', tab.name)
      this.params.target = tab.name == '' ? '' : tab.name
      this.page = this.$options.data.call(this).page
      this.getPage()
    },
    toDetail (row) {
      let params = {
        id: row.id,
        target: row.target,
        activeValue: this.activeName
      }
      this.setPageNum(this.page.current, this.page.size, this.params)
      this.$router.push({
        path: '/finance/detail',
        query: {
          params: JSON.stringify(params)
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">
.container {
  .box-total {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 8px 20px 0 20px;

    .card {
      min-width: 220px;
      background: #ffffff;
      border: 1px solid #d2d8e2;
      border-radius: 6px;
      padding: 20px 24px;
      margin-right: 20px;

      .title_medium {
        font-size: 14px;
        text-align: left;
        color: #39404d;
        line-height: 20px;
        margin-bottom: 4px;
      }
      .titl_large {
        font-size: 20px;
        font-weight: 600;
        text-align: left;
        color: #39404d;
        line-height: 24px;
      }
    }
  }
}
</style>
